基准|数目_requireJS学习笔记

篇首语：本文由编程笔记#小编为大家整理，主要介绍了requireJS学习笔记相关的知识，希望对你有一定的参考价值。

AMD、CMD与commonJS

requireJS实现了AMD规范&＃xff0c;即异步加载模块&＃xff0c;模块加载的时候不会阻塞后续代码的执行&＃xff0c;将模块加载完后的操作&＃xff08;依赖该模块的程序&＃xff09;放到回调函数中进行。这种规范适合于浏览器端。例如&＃xff1a;

require([&＃39;module1&＃39;, &＃39;module2&＃39;], function(mod1, mod2)
//do something; //当module1/2加载完后会执行该回调。加载时不阻塞require后面的代码
);

而&＃xff08;node服务端采用的是commonJS规范&＃xff0c;commonJS是同步的&＃xff0c;因为文件就存在于服务器&＃xff0c;require进来的时候比较快&＃xff09;。例如&＃xff1a;

var module &＃61; require (&＃39;module&＃39;);
module.func();

一个文件就是一个模块&＃xff0c;通过module.exports 或exports 对象来导出模块内的方法、属性&＃xff0c;方便外部模块引用。

requireJS不光实现了异步加载&＃xff0c;避免页面假死&＃xff0c;同时还管理了模块间的依赖&＃xff0c;使得代码更容易维护。

而AMD也是异步加载的规范&＃xff0c;与AMD不同的是&＃xff0c;AMD推崇依赖前置&＃xff0c;即提前加载好依赖的模块&＃xff0c;而CMD推崇依赖就近加载(延后执行依赖模块&＃xff0c;as lazy as possible)&＃xff0c;要用的时候才加载。二者的主要区别就是所依赖的模块的执行时机不同&＃xff08;依赖的加载怎么异步的&＃xff1f;&＃xff09;。
例如&＃xff1a;

• AMD&＃xff1a;

define([&＃39;a&＃39;, &＃39;b&＃39;], function(a, b) //当依赖的模块加载完成执行定义函数
a.func(); //a、b模块提前加载好
b.func();
return
...
;
);

如果有代码加载上面定义的模块&＃xff0c;则会先加载[] 中所依赖的模块。
- CMD&＃xff1a;

define(function(require, exports, module)
var a &＃61; require(&＃39;a&＃39;);
a.func();
...
var b &＃61; require(&＃39;b&＃39;);
b.func();
);

为了加载commonJS规范的模块&＃xff0c;应该使用和CMD类似的加载依赖方式&＃xff08;无法通过数组参数加载依赖&＃xff09;&＃xff1a;

define(function(require, exports, module)
var a &＃61; require(&＃39;a&＃39;),
b &＃61; require(&＃39;b&＃39;);
//Return the module value
return function () ;

);

此外&＃xff0c;如果依赖是相对路径&＃xff0c;要讲require 作为依赖添加到依赖参数&＃xff1a;

define(["require", "./relative/name"], function(require)
var mod &＃61; require("./relative/name");
);

因此&＃xff0c;最好的方式就是直接使用上面的commonJS的方式&＃xff08;simplified CommonJS wrapping&＃xff0c;requirejs对这种包装会解析成AMD的模式&＃xff09;。

requireJS的使用

requireJS使用ModuleId来替代文件路径。moduleId 是有baseUrl 和paths 来设置的。
由于浏览器是不识别require、define 等的。因此需要在页面加载文件require.js 。此外&＃xff0c;还可以对模块的基准路径、路径、不遵循AMD规范的模块进行配置。
有两种方式&＃xff0c;一种是调用require.config() 方法&＃xff1a;

require.config(
baseUrl: &＃39;js&＃39;,
paths:
&＃39;module1&＃39;: &＃39;lib/module1&＃39;,
...
,
shim:
&＃39;lib/jquery.validate&＃39;: [&＃39;jquery&＃39;],
...

);

显然需要在require.js 文件引入之后才能调用该方法。
一种是定义一个require 全局对象&＃xff1a;

var require &＃61;
//内容同上
;

该对象需要在require.js 文件引入之前进行定义。

requireJS实现机制

RequireJS使用head.appendChild()将每一个依赖加载为一个script标签。
RequireJS等待所有的依赖加载完毕&＃xff0c;计算出模块定义函数正确调用顺序&＃xff0c;然后依次调用它们。

问题&＃xff1a; 动态生成的script标签&＃xff1f;控制加载顺序就是生成标签的顺序&＃xff0c;利用script标签加载好后出发load事件&＃xff1f;

项目中提前定义require 为收集函数来收集页面中出现的require 方法&＃xff0c;并放到页面结尾处再执行。不过使用配置文件中再次声明一个require对象覆盖了前面定义的收集函数。

参考&＃xff1a;
requireJS中文文档

requireJS中的r.js

由于一个模块是一个JS文件&＃xff08;生成script 标签插入到head&＃xff09;&＃xff0c;加载多个模块的时候会增加请求数目。requireJS提供了一个工具即r.js来进行JS文件的合并。
定义一个模块的时候指定依赖可以使用这种方式&＃xff1a;

//test.js
define([&＃39;jquery&＃39;, &＃39;common&＃39;], function($, common)
// do something
return
;
);

或者采用兼容commonJS语法的方式&＃xff1a;

define(function(require,[exports, module])
var $ &＃61; require(&＃39;jquery&＃39;);
var common &＃61; require(&＃39;common&＃39;);
// do something
return
;
);

还有当以字符串数组例如require([&＃39;&＃39;]) 的形式加载模块时。以上方式在r.js在进行合并时&＃xff0c;默认会将定义的模块及其依赖的诸如jquery、common等模块合并到一个JS文件中&＃xff0c;除非你在build.js配置文件中指定要exclude哪些文件&＃xff0c;这样就不会合并指定的文件了。另外也可以使用include来动态指定要包括哪些文件&＃xff0c;这样可以添加在静态分析的时候没有合并的文件。合并的时候会把直接依赖、以及依赖的依赖…均合并到一个文件中。

在html中的引入&＃xff1a;

require([&＃39;common&＃39;], function()
require([&＃39;test&＃39;], function(module)
//do something
);
);

并不是说test依赖于common&＃xff0c;而是指定加载顺序&＃xff0c;必须是common加载完后才能加载test。该处与模块的合并打包没有关系&＃xff0c;仅仅指定加载顺序。模块的合并打包只与在定义模块的时候有无依赖以及build.js中的include和exclude有关。
common中包含了一些公用的文件&＃xff0c;可以缓存。

如果A依赖B&＃xff0c;B依赖C&＃xff0c;在没有做exclude的时候A中会包含B、C以及A自身的模块内容。

如果A依赖B、C&＃xff0c;B依赖C&＃xff0c;A把B exclude了&＃xff0c;那么也会默认把C也exclude掉。即exclude的时候会把依赖以及依赖的依赖。。。中的也排除掉&＃xff0c;即便自身显示地依赖了‘依赖的依赖’中某个模块。

对include 和exclude 的解释&＃xff0c;官方的说明比较清晰&＃xff1a;

参考&＃xff1a;r.js/build/example.build.js

问题&＃xff1a;当将公用模块打包到一个文件后&＃xff0c;别的文件要加载其中的某个模块的时候是怎么加载进来的&＃xff1f;